<template>
  <view v-if="template">
    <s-layout
      title="首页"
      navbar="custom"
      tabbar="/pages/index/index"
      :bgStyle="template.style?.background"
      :navbarStyle="template.style?.navbar"
      onShareAppMessage
    >
			<!-- 轮播 -->
			<su-swiper
				:circular="true"
				:list="banners"
				:height="280"
			/>
			<!-- 公告 -->
			<view class="ss-flex notice-wrap">
				<view class="title">通知公告</view>
			  <su-notice-bar
			    style="flex: 1"
			    :showIcon="false"
			    scrollable
			    single
			    :text="noticeText.text"
			    :speed="50"
					backgroundColor="#fff"
			    :color="noticeText.color"
			  ></su-notice-bar>
			</view>
			
			<!-- 快递比价寄 -->
			<view class="container">
				<view class="nav-logo">
					<text class="text">快递比价寄</text>
					<view class="logo">
						<image v-for="(item, index) in logos" :key="index" :src="item" mode="scaleToFill"></image>
					</view>
				</view>
				<view class="card serve">
					<view class="serve-box">
						<view @tap="toMail">
							<image src="https://kuaidi.qidianvote.cn/static/home/1.png" mode="aspectFit"></image>
							<view class="ss-flex-col">
								<text class="title">优惠寄件</text>
								<text class="note">官方上门取件</text>
							</view>
						</view>
						<view @tap="toQuery">
							<image src="https://kuaidi.qidianvote.cn/static/home/2.png" mode="aspectFit"></image>
							<view class="ss-flex-col ss-p-r-20">
								<text class="title">快递查询</text>
								<text class="note">查看快递</text>
							</view>
						</view>
					</view>
					<s-notice-swiper class="notice" :data="notices" />
				</view>
				<view class="card more">
					<navigator url="/pages/public/richtext?id=4" class="item-box">
						<image class="icon" src="/static/index/wjpsm.png"></image>
						<text class="text">
							违禁品说明
						</text>
					</navigator>
					<navigator url="/pages/public/faq" class="item-box">
						<image class="icon" src="/static/index/bzzx.png"></image>
						<text class="text">
							帮助中心
						</text>
					</navigator>
					<button class="item-box" plain open-type="share">
						<image class="icon" src="/static/index/fxhy.png"></image>
						<text class="text">
							分享好友
						</text>
					</button>
					<button class="item-box" plain open-type="contact">
						<image class="icon" src="/static/index/zxkf.png"></image>
						<text class="text">
							在线客服
						</text>
					</button>
				</view>
				<view class="module">
					<view v-for="(item, index) in modules" :key="index" class="card" @tap="toPage(item.url)">
						<view class="ss-flex-col">
							<text class="title">{{ item.title }}</text>
							<text class="note">{{ item.note }}</text>
						</view>
						<image :src="item.icon" mode="scaleToFill"></image>
					</view>
				</view>
				
			</view>
    
			<!-- 分享 -->
			<view @tap="sheep.$router.go('action:showShareModal')" class="share">
				<image class="share-img" src="/static/index/fx.png" mode=""></image>
			</view>
		</s-layout>
  </view>
</template>

<script setup>
  import { computed, ref } from 'vue';
  import { onLoad, onShow, onPageScroll, onPullDownRefresh } from '@dcloudio/uni-app';
  import sheep from '@/sheep';
  import $share from '@/sheep/platform/share';
	import { showShareModal, showAuthModal } from '@/sheep/hooks/useModal';
	
  // 隐藏原生tabBar
  uni.hideTabBar();
	
	const store = sheep.$store('app')
	const banners = ref([])
	
	const notices = ref([])
	const noticeText = ref({})
	
	const logos = [
		'https://kuaidi.qidianvote.cn/static/home/JT.jpg',
		'https://kuaidi.qidianvote.cn/static/home/JD.jpg',
		'https://kuaidi.qidianvote.cn/static/home/YTO.jpg',
		'https://kuaidi.qidianvote.cn/static/home/STO-INT.jpg',
		'https://kuaidi.qidianvote.cn/static/home/DOP.jpg',
		'https://kuaidi.qidianvote.cn/static/home/SF.jpg',
		'https://kuaidi.qidianvote.cn/static/home/ZTO.jpg',
		'https://kuaidi.qidianvote.cn/static/home/YUND.jpg',
	]
	const modules = [
		{
			title: '运费补差价',
			note: '运费补差价',
			icon: 'https://kuaidi.qidianvote.cn/static/home/7.png',
			url:'/pages/freight/buchajia'
		},
		{
			title: '运费查询',
			note: '运费快速查询',
			icon: 'https://kuaidi.qidianvote.cn/static/home/4.png',
			url: '/pages/freight/inquiry'
		},
		{
			title: '会员充值',
			note: '获取额外收益',
			icon: 'https://kuaidi.qidianvote.cn/static/home/5.png',
			url: '/pages/commission/goods'
		},
		{
			title: '问题帮助',
			note: '帮助文档答疑',
			icon: 'https://kuaidi.qidianvote.cn/static/home/6.png',
			url: '/pages/public/faq'
		},
	]

  const template = computed(() => sheep.$store('app').template?.home);

	const toPage = (url) => {
		if (!url) return
		sheep.$router.go(url)
	}
	
	const toMail = () => {
		let userinfo=sheep.$store('user').userInfo;
		if(userinfo.mobile.length<8){
			 showAuthModal('changeMobile');
			return false;
		}
		
		sheep.$router.go('/pages/mail/index')
		sheep.$store('mail').$reset()
	}
	
	const toQuery = () => {
		sheep.$router.go('/pages/freight/query')
	}
	
	const getAreaData = () => {
		if (!!uni.getStorageSync('areaData')) {
		  return;
		}
		
		// 提前加载省市区数据
		sheep.$api.data.area().then((res) => {
		  if (res.code === 1) {
		    uni.setStorageSync('areaData', res.data);
		  }
		});
	}
	
	onShow(async () => {
		getAreaData()
		// 首页公告
		const { data, code } = await sheep.$api.mail.banner()
		if (code == 1) {
			const baseUrl = import.meta.env.SHOPRO_BASE_URL;
			notices.value = data[2]
			banners.value = data.home.data[0].data.list.map(item => {
				item.src = baseUrl + item.src
				return item
			})
			noticeText.value = data.home.data[1].data.title
			store.setNoticeText(data.home.data[2].data.title.text)
		}
	})

  onLoad((options) => {
    // #ifdef MP
    // 小程序识别二维码
    if (options.scene) {
      const sceneParams = decodeURIComponent(options.scene).split('=');
      options[sceneParams[0]] = sceneParams[1];
    }
    // #endif

    // 预览模板
    if (options.templateId) {
      sheep.$store('app').init(options.templateId);
    }

    // 解析分享信息
    if (options.spm) {
      $share.decryptSpm(options.spm);
    }

    // 进入指定页面(完整页面路径)
    if (options.page) {
      sheep.$router.go(decodeURIComponent(options.page));
    }
  });

  // 下拉刷新
  onPullDownRefresh(() => {
    sheep.$store('app').init();
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 800);
  });

  onPageScroll(() => {});
</script>

<style lang="scss" scoped>
	.notice-wrap {
		margin: 20rpx 0;
		height: 80rpx;
		line-height: 80rpx;
	  background: #fff;
	  .title {
	    padding-left: 20rpx;
	  }
	}
	.container {
		width: 92%;
		margin: 0 auto;
		.title {
			color: #333333;
			font-size: 32rpx;
			font-weight: 600;
			margin-bottom: 10rpx;
		}
		.note {
			font-size: 28rpx;
			color: #666;
		}
	}
	.nav-logo {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		padding-left: 30rpx;
		padding-right: 20rpx;
		background-color: #ffe4e1;
		border-radius: 100rpx;
		margin: 30rpx 0;
		.text {
			font-size: 28rpx;
			font-weight: 600;
			color: #333333;
		}
		.logo {
			display: flex;
			column-gap: 10rpx;
			image {
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
			}
		}
	}
	.serve {
		box-shadow: 0 15rpx 30rpx rgba(102,102,102,.1);
		padding: 30rpx 0;
		&-box {
			display: flex;
			align-items: center;
			> view {
				display: flex;
				justify-content: center;
				align-items: center;
				column-gap: 20rpx;
				padding: 20rpx 0;
				flex: 1;
				&:first-child {
					border-right: 2rpx solid #eeeeee;
				}
				image {
					width: 80rpx;
					height: 80rpx;
				}
			}
		}
		.notice :deep(.message-wrap) {
			margin: 30rpx 0 10rpx;
			padding-left: 30rpx;
		}
	}
	.module {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
		margin: 36rpx 0;
		
		.card {
			height: 200rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			column-gap: 20rpx;
			padding-left: 50rpx;
			padding-right: 20rpx;
			
			image {
				width: 68rpx;
				height: 68rpx;
			}
		}
	}
	.more {
		display: flex;
		align-items: center;
		padding: 24rpx 20rpx;
		margin: 36rpx 0;
		.item-box {
			display: flex;
			flex-direction: column;
			align-items: center;
			row-gap: 8rpx;
			flex: 1;
			border: 0;
			padding: 0;
			.icon {
				width: 40rpx;
				height: 40rpx;
			}
			.text {
				color: #000;
				font-size: 26rpx;
				line-height: 34rpx;
			}
			&:first-child .icon {
				transform: scale(1.1);
			}
			&:last-child .icon {
				transform: scale(0.9);
			}
		}
	}
	.share {
		position: fixed;
		right: 4rpx;
		bottom: 38%;
		width: 100rpx;
		height: 100rpx;
		&-img {
			width: 100%;
			height: 100%;
		}
	}
</style>
